/**
 * Markdown 中的标签页组件
 * 
 * 使用方式（在 Markdown 中）：
 * <!-- tabs:start -->
 * #### **Tab 1 Title**
 * Content for tab 1
 * 
 * #### **Tab 2 Title**
 * Content for tab 2
 * <!-- tabs:end -->
 */

import React, { useState } from 'react';
import { cn } from '@/lib/utils';
import { PureMarkdownRenderer } from './markdown-renderer';

/**
 * 解析标签页内容
 * @param {string} content - 标签页的原始内容
 * @returns {Array} 标签页数组 [{ title, content }, ...]
 */
const parseTabsContent = (content) => {
    if (!content) return [];

    // 按 ### 分割标签页
    const lines = content.split('\n');
    const tabs = [];
    let currentTab = null;

    lines.forEach((line) => {
        const trimmedLine = line.trim();
        // 检测是否是标签页标题（### 或 #### 开头）
        if (trimmedLine.startsWith('####') || trimmedLine.startsWith('###')) {
            // 保存前一个标签页
            if (currentTab) {
                tabs.push(currentTab);
            }
            // 创建新标签页，提取标题（去除 ### 或 #### 和 ** 标记）
            let title = trimmedLine
                .replace(/^####\s*/, '')
                .replace(/^###\s*/, '')
                .replace(/^\*\*(.*)\*\*$/, '$1')  // 去除 **粗体**
                .trim();

            currentTab = {
                title,
                content: ''
            };
        } else if (currentTab) {
            // 添加内容到当前标签页
            currentTab.content += line + '\n';
        }
    });

    // 保存最后一个标签页
    if (currentTab) {
        tabs.push(currentTab);
    }

    return tabs;
};

/**
 * 标签页组件
 * @param {Object} props
 * @param {string} props.content - 标签页的原始内容
 */
export const MarkdownTabs = ({ content = '' }) => {
    const [activeTab, setActiveTab] = useState(0);
    const tabs = parseTabsContent(content);

    if (!tabs || tabs.length === 0) {
        return (
            <div className="my-6 p-4 border border-gray-200 dark:border-gray-700 rounded-lg bg-gray-50 dark:bg-gray-800">
                <p className="text-sm text-gray-500 dark:text-gray-400">
                    标签页内容为空。请使用 ### 定义标签页标题。
                </p>
            </div>
        );
    }

    return (
        <div className="my-6 border border-gray-200 dark:border-gray-700 rounded-lg not-prose">
            {/* 标签头 */}
            <div className="flex overflow-x-auto border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 rounded-t-lg">
                {tabs.map((tab, index) => (
                    <button
                        key={index}
                        onClick={() => setActiveTab(index)}
                        className={cn(
                            "px-4 py-3 text-sm font-medium transition-all whitespace-nowrap flex-shrink-0",
                            "border-b-2 relative",
                            activeTab === index
                                ? "border-primary text-primary bg-white dark:bg-gray-900"
                                : "border-transparent text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700"
                        )}
                    >
                        {tab.title}
                    </button>
                ))}
            </div>

            {/* 标签内容 - 直接复用 PureMarkdownRenderer（包含代码块复制按钮） */}
            <div className="bg-white dark:bg-gray-900 rounded-b-lg p-6">
                {tabs[activeTab] && (
                    <PureMarkdownRenderer
                        content={tabs[activeTab].content.trim()}
                        enableCopyButton={true}
                    />
                )}
            </div>
        </div>
    );
};

export default MarkdownTabs;

